<template>
  <div>
    <div id="indexKefuTop">
      <el-row :gutter="20" style="margin-bottom: 30px">
        <el-col :span="6">
          <div class="headerDiv">
            <p class="moneytitle" style="margin-bottom: 10px">售票量</p>
            <p>
              <span class="moneyStyle">{{
                headerData.ticketSales ? headerData.ticketSales : 0
              }}</span>
            </p>
            <div class="statusMessage">
              <span style="padding-right: 10px">环比</span>
              <div class="imgDiv">
                <img
                  v-if="
                    headerData.orderStatusXB == '同比上涨' ||
                    headerData.ticketSalesStatus == '同比上涨' ||
                    headerData.ticketSalesStatus == '持平'
                  "
                  class="divImg"
                  src="../image/top.png"
                  alt=""
                />
                <img
                  v-if="
                    headerData.orderStatusXB == '同比下降' ||
                    headerData.ticketSalesStatus == '同比下降'
                  "
                  class="divImg"
                  src="../image/down.png"
                  alt=""
                />
              </div>
              <span class="status">{{
                headerData.ticketSalesBL ? headerData.ticketSalesBL : 0
              }}</span>
            </div>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="headerDiv">
            <p class="moneytitle" style="margin-bottom: 10px">退票量</p>
            <p>
              <span class="moneyStyle">{{
                headerData.refundSales ? headerData.refundSales : 0
              }}</span>
            </p>
            <div class="statusMessage">
              <span style="padding-right: 10px">环比</span>
              <div class="imgDiv">
                <img
                  v-if="
                    headerData.totalSYBLStatus == '同比上涨' ||
                    headerData.refundSalesStatus == '同比上涨' ||
                    headerData.ticketSalesStatus == '持平'
                  "
                  class="divImg"
                  src="../image/top.png"
                  alt=""
                />
                <img
                  v-if="
                    headerData.totalSYBLStatus == '同比下降' ||
                    headerData.refundSalesStatus == '同比下降'
                  "
                  class="divImg"
                  src="../image/down.png"
                  alt=""
                />
              </div>
              <span class="status">{{
                headerData.refundSalesBL ? headerData.refundSalesBL : 0
              }}</span>
            </div>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="headerDiv">
            <p class="moneytitle" style="margin-bottom: 10px">
              昨日新增用户量（小程序）
            </p>
            <p>
              <span class="moneyStyle">暂无数据</span>
            </p>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="headerDiv">
            <p class="moneytitle" style="margin-bottom: 10px">
              昨日访问人数（小程序）
            </p>
            <p>
              <span class="moneyStyle">暂无数据</span>
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    headerData(a, b) {
      this.headerData = a;
    },
  },
  props: ["headerData"],
  data() {
    return {};
  },

};
</script>

<style scoped>
.imgDiv {
  display: inline-block;
  width: 40px;
  height: 40px;
  position: relative;
  top: 13px;
}
.divImg {
  width: 100%;
  height: 100%;
}
.headerDiv {
  border: 1px solid rgba(233, 233, 233, 1);
  padding-left: 10%;
  padding-top: 20px;
  width: 95%;
  height: 155px;
  margin: 0 auto;
}
.headerDiv p {
  margin: 0;
  padding: 0;
}
.moneytitle,
.statusMessage {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.427450980392157);
}

.status {
  color: rgba(0, 0, 0, 0.647058823529412);
}
.moneyStyle {
  font-size: 1.9rem;
}
#indexKefuTop,
#indexKfBottom {
  width: 96%;
  margin: 0 auto;
  margin-top: 20px;
}
.indexkfItem {
  border: 1px solid rgba(233, 233, 233, 1);
  width: 91%;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}
#indexkfRight {
  border: 1px solid rgba(233, 233, 233, 1);
  width: 98%;
  margin: 0 auto;
  height: 300px;
}
#indexkfRight p {
  padding-left: 25px;
  padding-top: 20px;
}
#indexkfRight div {
  width: 80%;
  margin: 0 auto;
}
</style>